<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }

        .BOX{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 50px;
        }
    </style>
</head>
<body>
    <!--
        属性节点(html属性 => 标签内可见的)
        (1)写在标签内,和标签名以一个空格分隔叫做属性, 
        (2)组成: 属性名="属性值" 
        (3)属性可以没有也可以有多个,多个之间用空格分隔
            属性是对标签的说明 
    -->
    <div id="demo" class="box one two three" title="hello" data-id="0" data-msg="abc" data-index="0" asd="zxc" >
        <span>这是标签内的文本</span>
    </div>
</body>
<script>
    /* 
        属性节点(html属性 => 标签内可见的)
            (1)写在标签内,和标签名以一个空格分隔叫做属性, 
            (2)组成: 属性名="属性值" 
            (3)属性可以没有也可以有多个,多个之间用空格分隔
                属性是对标签的说明  

        操作属性节点:
            box.setAttribute(key,value)
            box.getAttribute(key)
            box.removeAttribute(key)
    */

    /* 
        元素节点的属性 (元素节点的内置属性和方法 => 官方定义)
        (1) 元素节点也是一个对象类型的数据(引用类型),  有自己的属性和方法
        (2) 每个元素节点都是一个特殊的对象,官方给每个元素内置的属性和方法

        元素节点的属性
            Element.parentElement
            Element.children
            Element.previousElementSibling
            Element.nextElementSibling
            Element.innerHTML
            Element.innerText

             innerHTML   获取和设置元素内的html结构(标签和文本)
            innerText   获取和设置元素内的文本结构(文本)
            textContent   获取和设置元素内的文本结构(文本)  => 只能设置文本,如果包含html结构,会原样输出

            了解
            outerHTML   获取和设置元素本身及其内部的html结构(标签和文本)
            outerText   获取和设置元素本身及其内部的文本结构

            id    获取和设置元素的id名
            className   获取和设置元素的class名
            classList  获取元素的class列表(伪数组)  => 内部有增删改查class名的方法
            title  获取和设置元素的title属性
            style  获取和设置元素的内联样式/行内样式
            style取值 => 只能获取内联样式/行内样式


        元素节点的方法
            Element.setAttribute(key,value)
            Element.getAttribute(key)
            Element.removeAttribute(key)
    
    */

    // className  获取和设置元素的class名(统一设置所有的)

    var box = document.querySelector(".box");
    console.dir(box); // 以键值对的形式打印对象(可以看到对象中的属性和方法)

    // console.log(box.className);
    
    // box.className = "BOX";
    // console.log(box.className);


    // 问题: 如果有多个class名,如何增 删 改 查 其中的一个

    console.log(box.classList);

    // classList中存在增 删 改 查class名的方法
    // add()      向匹配的元素中新增一个或多个class名(多class名逗号分隔 => 多参数);  返回值: undefined
    // remove()   删除匹配元素中的一个或多个class名(多class名逗号分隔 => 多参数) 返回值: undefined
    // replace()  将匹配元素中的某个class名替换为新class名(每次替换一个)  返回值: undefined
    // contains() 判断匹配的元素中是否存在某个class名   返回值: 存在=> true 不存在=>false
    // forEach()  遍历方法

    // 一个一个加
    // box.classList.add("four");
    // box.classList.add("five");

    // 一次性加多个
    box.classList.add("four","five");

    // 删
    box.classList.remove("one","three");

    // 改(替换)
    box.classList.replace("two","second");

    console.log(box.classList.contains("two"));
    console.log(box.classList.contains("four"));

    // 遍历
    box.classList.forEach(function(item,index){
        console.log(item,index);
    })

    // 小结
    // className 获取和设置整个class属性 => 不利于操作多class名,一般用于操作单class名
    // classList 获取class列表(可以多列表中的class名进行增删改查) => 一般用于操作多class名(单class名也行)

   

</script>
</html>